<template>
  <div class="main">
    <div class="py-container">
      <TypeNav />
      <BreadCrumb
        :getSearchData="getSearchData"
        :searchParams="searchParams"
        @delTrademark="delTrademark"
        @delProps="delProps"
      />
      <Selector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo" />
      <GoodsList
        :searchParams="searchParams"
        @changeOrder="changeOrder"
        @changPageNum="changPageNum"
      />
      <HotSale />
    </div>
  </div>
</template>

<script setup>
import BreadCrumb from "./BreadCrumb/BreadCrumb.vue";
import GoodsList from "./GoodsList/GoodsList.vue";
import HotSale from "./HotSale/HotSale.vue";
import Selector from "./Selector/Selector.vue";

import { onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const $route = useRoute();
const $router = useRouter();
const $store = useStore();
const $state = $store.state;

//搜索页面传服务器各项参数
const searchParams = reactive({
  categoryId: undefined,
  categoryName: undefined, //设置undefined 发请求不带 节约宽带
  keyword: undefined,
  order: "1:desc",
  pageNo: 1,
  pageSize: 10,
  props: [],
  trademark: undefined,
});

//获取搜索数据方法
const getSearchData = () => {
  //重新配置datasearchParams的数据
  console.log($route.params, $route.query);
  Object.assign(searchParams, $route.params, $route.query);
  return $store.dispatch("getSearchData", searchParams); //seach仓库发请求
};
//获取子组件selectar传递的trademark品牌请求数据
const trademarkInfo = (value) => {
  searchParams.trademark = value;
  getSearchData(); //重新发请求
};
//获取子组件selectar传递的attr属性请求数据
const attrInfo = (attr, attrValue) => {
  let props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
  if (searchParams.props.indexOf(props) == -1) {
    searchParams.props.push(props);
    getSearchData(); //重新发请求
  }
};
//删除面包屑处理事件
//1.删除Trademark面包屑数据
const delTrademark = () => {
  searchParams.trademark = undefined;
  getSearchData(); //重新发请求
};
//2.删除Prop面包屑index下标数据
const delProps = (index) => {
  searchParams.props.splice(index, 1); //从props数组中删除index下标
  getSearchData(); //重新发请求
};
//修改排序导航栏的id
const changeOrder = (navId) => {
  if (searchParams.order.split(":")[1] == "desc") {
    searchParams.order = `${navId}:asc`;
  } else {
    searchParams.order = `${navId}:desc`;
  }
  getSearchData(); //重新发请求
};
//修改分页的当前页码pageNoid
const changPageNum = (num) => {
  searchParams.pageNo = num;
  getSearchData(); //重新发请求
};

onMounted(() => {
  getSearchData();
});
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;
  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
